import { useState } from "react";
import { FiMessageSquare, FiUsers, FiCompass, FiUser } from "react-icons/fi";
import { CgAdd } from "react-icons/cg";
import { FaSearch } from "react-icons/fa";
import { GoDotFill } from "react-icons/go";

const WeChatTabs = () => {
  const [activeTab, setActiveTab] = useState("chats");

  // 聊天列表数据 (已修正所有错误)
  const chats = [
    { id: 1, name: "张三", message: "你好，在吗？", time: "15:30", unread: 3 },
    {
      id: 2,
      name: "工作群",
      message: "大家记得提交周报",
      time: "14:22",
      unread: 0,
    },
    {
      id: 3,
      name: "李四",
      message: "周末去哪里玩？",
      time: "昨天",
      unread: 1,
      muted: true,
    },
    {
      id: 4,
      name: "家人",
      message: "妈妈：晚上回家吃饭吗？",
      time: "昨天",
      unread: 0,
    },
    { id: 5, name: "王五", message: "[图片]", time: "前天", unread: 0 },
    {
      id: 6,
      name: "客户支持",
      message: "您的问题已解决",
      time: "星期三",
      unread: 0,
    },
    {
      id: 7,
      name: "赵六",
      message: "谢谢你的帮助！",
      time: "星期三",
      unread: 0,
    },
    {
      id: 8,
      name: "读书会",
      message: "下次活动时间确定",
      time: "星期一",
      unread: 5,
    },
  ];

  return (
    <div className="flex flex-col h-full w-full bg-white">
      {/* 顶部固定区域 - 带圆形背景框的图标 */}
      <div className="bg-[#07C160] w-full py-4 px-4">
        <div className="flex items-center justify-between">
          {/* 中间标题 */}
          <div className="text-xl font-medium text-white text-center flex-1">
            微信
          </div>

          {/* 右侧图标按钮 - 带圆形背景框，图标尺寸增大，间距增大 */}
          <div className="flex items-center pr-2">
            {/* 搜索图标 - 使用 FaSearch，增大尺寸，右边增加间距 */}
            <div className="bg-white bg-opacity-20 rounded-full p-1 mr-6">
              {/* 添加了 mr-2 */}
              <FaSearch className="text-white text-2xl" /> {/* 已增大尺寸 */}
            </div>

            {/* 带圈的加号图标 - 使用 CgAdd，增大尺寸 */}
            <div className="bg-white bg-opacity-20 rounded-full p-1">
              <CgAdd className="text-white text-2xl" /> {/* 已增大尺寸 */}
            </div>
          </div>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="flex-1 overflow-hidden bg-[#EDEDED]">
        {/* 聊天列表区域 */}
        {activeTab === "chats" && (
          <div className="overflow-y-auto h-full">
            <div className="min-h-full">
              <div className="pb-16">
                {chats.map((chat) => (
                  <div
                    key={chat.id}
                    className="border-b border-gray-200 last:border-b-0 bg-white hover:bg-gray-50 active:bg-gray-100 transition-colors"
                  >
                    <div className="flex items-center p-3">
                      <div className="relative mr-3">
                        <div className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center">
                          <span className="text-white font-bold">
                            {chat.name.charAt(0)}
                          </span>
                        </div>
                        {chat.unread > 0 && (
                          <span className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full text-xs w-5 h-5 flex items-center justify-center">
                            {chat.unread}
                          </span>
                        )}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex justify-between">
                          <span className="font-medium truncate text-gray-900">
                            {chat.name}
                          </span>
                          <span className="text-xs text-gray-500 whitespace-nowrap">
                            {chat.time}
                          </span>
                        </div>
                        <div className="flex items-center mt-1">
                          {chat.muted && (
                            <GoDotFill
                              className="text-red-500 mr-1"
                              size={14}
                            />
                          )}
                          <p className="text-sm text-gray-500 truncate flex-1">
                            {chat.message}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}

                {/* 当内容不足时显示占位符 */}
                {chats.length < 8 && (
                  <div className="py-4">
                    <div className="bg-white rounded-lg p-4 text-center text-gray-500 text-sm">
                      {chats.length > 0 ? "没有更多聊天" : "暂无聊天记录"}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {/* 通讯录区域 */}
        {activeTab === "contacts" && (
          <div className="h-full flex items-center justify-center">
            <div className="text-center text-gray-500">通讯录内容区域</div>
          </div>
        )}

        {/* 发现区域 */}
        {activeTab === "discover" && (
          <div className="h-full flex items-center justify-center">
            <div className="text-center text-gray-500">发现内容区域</div>
          </div>
        )}

        {/* 个人资料区域 */}
        {activeTab === "me" && (
          <div className="h-full flex items-center justify-center">
            <div className="text-center text-gray-500">我内容区域</div>
          </div>
        )}
      </div>

      {/* 底部Tab栏 */}
      <div className="w-full bg-white border-t border-gray-200 shadow-top">
        <div className="flex w-full justify-around">
          <button
            onClick={() => setActiveTab("chats")}
            className={`flex flex-col items-center py-2 px-4 text-sm w-full ${
              activeTab === "chats" ? "text-[#07C160]" : "text-gray-500"
            }`}
          >
            <FiMessageSquare className="text-lg mb-1" />
            <span>微信</span>
          </button>

          <button
            onClick={() => setActiveTab("contacts")}
            className={`flex flex-col items-center py-2 px-4 text-sm w-full ${
              activeTab === "contacts" ? "text-[#07C160]" : "text-gray-500"
            }`}
          >
            <FiUsers className="text-lg mb-1" />
            <span>通讯录</span>
          </button>

          <button
            onClick={() => setActiveTab("discover")}
            className={`flex flex-col items-center py-2 px-4 text-sm w-full ${
              activeTab === "discover" ? "text-[#07C160]" : "text-gray-500"
            }`}
          >
            <FiCompass className="text-lg mb-1" />
            <span>发现</span>
          </button>

          <button
            onClick={() => setActiveTab("me")}
            className={`flex flex-col items-center py-2 px-4 text-sm w-full ${
              activeTab === "me" ? "text-[#07C160]" : "text-gray-500"
            }`}
          >
            <FiUser className="text-lg mb-1" />
            <span>我</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default WeChatTabs;
